<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查询学生信息表格</title>
    <style>
        table {
            border-collapse: collapse;
        }

        td,
        th {
            padding: 5px 20px;
            border: 1px solid #ccc;
        }

        .edit {
            width: 500px;
            padding: 10px;
            border: 1px solid #ccc;
            margin: 10px;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
    </table>
    <script id="stus" type="text/html">
        {{each $data item index}}
        <tr>
            <td>{{item._id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.sex}}</td>
            <td>{{item.age}}</td>
            <td>
                <button onclick="getOne('{{item._id}}')">修改</button>
                <button onclick="deleteStudent('{{item._id}}')">删除</button>
            </td>
        </tr>
        {{/each}}
    </script>
    <hr>
    <div class="edit">
        <!-- 定义一个隐藏域，隐藏学生的id，在修改学生时会用到 -->
        <input type="hidden" id="_id">
        <h3 id="title" style="text-align: center;">添加学生</h3>
        <p>姓名：<input type="text" id="name"></p>
        <p>性别：<input type="radio" id="man" name="sex" value="男" checked>男
            <input type="radio" id="woman" name="sex" value="女">女
        </p>
        <p>年龄：<input type="text" id="age"></p>
        <p>
            <button id="submit">提交</button>
            <button id="cancel">取消</button>
        </p>
    </div>
    <script src="./js/artTemplate.js"></script>
    <script>
        // 发送ajax请求，获取学生信息
        // 默认情况下：ajax请求必须要遵循同源策略：协议名，主机名(域名，ip)，端口号，要完全相同
        // 否则就是跨域请求。

        // 定义加载数据的方法
        function loadData() {
            let xhr = new XMLHttpRequest()
            xhr.open('GET', 'http://127.0.0.1:8848/getAllStudent')
            xhr.send()
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        //获取学生信息
                        let stus = xhr.responseText
                        // 根据模板，将数据渲染成html
                        let html = template('stus', JSON.parse(stus))
                        document.querySelector("#tbody").innerHTML = html
                    }
                }
            }
        }
        // 调用加载数据的方法
        loadData()

        //清空表单的方法
        function clearForm() {
            document.querySelector("#name").value = ""
            document.querySelector("#age").value = ""
            document.querySelector("#man").checked = true
        }

        // 给提交按钮注册点击事件
        document.querySelector('#submit').onclick = function () {
            // 获取数据
            let name = document.querySelector("#name").value
            let age = document.querySelector("#age").value
            let sex = document.querySelector("#man").checked ? "男" : "女"
            let stu = {
                name, age, sex
            }

            let xhr = new XMLHttpRequest()
            // 定接口地址，默认是添加接口
            let url = 'http://127.0.0.1:8848/addStudent'
            if(document.querySelector('#title').innerHTML==='修改学生'){
                //改成修改接口地址
                url = 'http://127.0.0.1:8848/updateStudent'
                stu._id = document.querySelector("#_id").value
            }
            xhr.open('POST', url)
            xhr.setRequestHeader('Content-Type', 'application/json')
            xhr.send(JSON.stringify(stu))
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        if (xhr.responseText == 'true') {
                            // 调用加载数据的方法
                            loadData()
                            if( document.querySelector('#title').innerHTML === "添加学生"){
                                // 调用清空表单的方法
                                clearForm()
                            }
                        }
                    }
                }
            }
        }

        // 取消按钮点击事件
        document.querySelector('#cancel').onclick = function(){
            // 调用清空表单的方法
            clearForm()
            document.querySelector('#title').innerHTML = "添加学生"
        }

        //删除学生的方法
        function deleteStudent(_id) {
            if (confirm('是否确定删除？')) {
                let xhr = new XMLHttpRequest()
                xhr.open('POST', 'http://127.0.0.1:8848/deleteStudent')
                xhr.setRequestHeader('Content-Type', 'application/json')
                xhr.send(JSON.stringify({ _id }))
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            if (xhr.responseText == 'true') {
                                // 调用加载数据的方法
                                loadData()
                            }
                        }
                    }
                }
            }
        }

        //根据id查询一个学生信息
        function getOne(_id) {
            let xhr = new XMLHttpRequest()
            xhr.open('GET', 'http://127.0.0.1:8848/getOneStudent?_id=' + _id)
            xhr.send()
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        //获取学生信息
                        let stu = JSON.parse(xhr.responseText)
                        // 在表单中填写学生信息
                        document.querySelector("#name").value = stu.name
                        document.querySelector("#age").value = stu.age
                        if(stu.sex==='男'){
                            document.querySelector("#man").checked = true
                        }else{
                            document.querySelector("#woman").checked = true
                        }
                        // 在隐藏域里面，隐藏学生的编号
                        document.querySelector("#_id").value = stu._id
                        // 修改标题为：修改学生
                        document.querySelector('#title').innerHTML = "修改学生"
                    }
                }
            }
        }
    </script>
</body>

</html>